<div nz-row nzGutter="64" class="container">
  <div nz-col [ngClass]="data.key" nzSpan="12" *ngFor="let data of record | keys">
    <div nz-row nzType="flex">
      <div nz-col nzSpan="24" [ngSwitch]="data.key" class="header">
        <span *ngSwitchCase="'in-user'" style="font-size: 24px;">In进场人员</span>
        <span *ngSwitchCase="'out-user'" style="font-size: 24px;">Out出场人员</span>
      </div>

      <div nzType="flex" nz-row nz-col nzSpan="24" class="info-box">
        <div nz-col nzSpan="8" *ngFor="let item of data.value | keys">

          <div class="info-item col no-warp">
            <div style="font-size: 16px">{{item.key}}</div>

            <div *ngIf="item.value" class="user-photo row-span-4">
              <img [src]="item.value.facePicurl" />
            </div>
            <div class="user-info row-span-1" *ngIf="item.value">
              <div class="username">{{ item.value.faceName }}</div>
              <div class="department">{{ item.value.faceCity }}</div>
              <div class="userid">{{ item.value.faceCardid }}</div>
            </div>
            <div class="user-date row-span-1" *ngIf="item.value">
              <div class="date">{{ item.value.alarmTime | date: 'yyyy-MM-dd' }}</div>
              <div class="time">{{ item.value.alarmTime | date: 'HH:mm:ss' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="info-card row around-span no-wrap">
  <div>实时出入情况</div>
  <div>当前日期: {{ today | date: 'yyyy年MM月dd日' }}</div>
</div>
